<template>
  <div>
    <div class="chat-record" @click="toChatDetail(item.content.history_queue_id)">
    <div>{{ item.content.title }}</div>
    <div class="char-detail">
      <div
        class="chat-detail-list"
        v-for="(chatItem, index) in list"
        :key="index"
      >
        <span>{{
          chatItem.has_one_employee
            ? chatItem.has_one_employee.nickname + ": "
            : chatItem.has_one_user.nickname + ": "
        }}</span>
        <div
          v-html="chatItem.content"
          style="display: inline-block;"
          v-if="chatItem.content_type == 0"
        ></div>
        <div style="display: inline-block;" v-if="chatItem.content_type == 7">
          {{ chatItem.content.title }}
        </div>
        <div style="display: inline-block;" v-if="chatItem.content_type == 1">
          [ 图片信息 ]
        </div>
        <div style="display: inline-block;" v-if="chatItem.content_type == 2">
          [ 商品信息 ]
        </div>
        <div style="display: inline-block;" v-if="chatItem.content_type == 3">
          [ 订单信息 ]
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  props: ["item","emojiObjs"],
  data () {
    return {
      list:[]
    };
  },
  created(){
    this.list = this.fmtChatList(this.item.content.content_list);
  },
  methods: {
    toChatDetail(history_queue_id) {
      this.$router.push(this.fun.getUrl("chatRecord", { history_queue_id,emojiObjs:this.emojiObjs }));
      this.$emit('changeId',history_queue_id);
    },
    fmtChatList(chatList) {
      // 处理商品或表情消息
      if (chatList instanceof Array) {
        for (let i = 0; i < chatList.length; i++) {
          if (chatList[i]["content_type"] == 2 || chatList[i]["content_type"] == 3) {
            chatList[i]["content"] = JSON.parse(decodeURIComponent(chatList[i]["content"]));
          } else if (chatList[i]["content_type"] == 0) {
            chatList[i]["content"] = this.replaceEmoji(chatList[i]["content"]);
          }
        }
      } else if (chatList instanceof Object) {
        if (chatList["content_type"] == 2 || chatList["content_type"] == 3) {
          chatList["content"] = JSON.parse(decodeURIComponent(chatList["content"]));
        } else if (chatList["content_type"] == 0) {
          chatList["content"] = this.replaceEmoji(chatList["content"]);
        }
      }

      return chatList;
    },
    replaceEmoji(content) {
      let that = this;
      return content.replace(/face\[([^\s\[\]]+?)\]/g, function (i) {
        return '<img src="' + require("../../../../assets/images/" + that.emojiObjs[i]["url"]) + '" style="width:30px;height:30px;"/>';
      });
    },
  },

  components: {},
};

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
.chat-record {
  cursor: pointer;

  .char-detail {
    margin-top: 20px;
    color: #080707;

    .chat-detail-list {
      margin-top: 10px;
    }
  }
}
</style>